<template>
	<view class="container">
		<view class="header">
			<view class="door"></view>
		</view>
		<view class="content">
			<view class="item">
				<view class="title">手机号</view>
				<input type="tel" v-model="phone" placeholder="请输入手机号">
			</view>
			<view class="item">
				<view class="title">验证码</view>
				<view class="input_box">
					<input v-model="code" type="number" placeholder="请输入验证码">
					<text @tap="getCode" :style="{color:time==60000?'#5a5a5a':'#8b8b8b'}">{{text}}</text>
				</view>
			</view>
			<view class="item">
				<view class="title">新密码</view>
				<input type="text" password v-model="password" placeholder="请输入新密码">
			</view>
		</view>
		<view class="btn" @tap="forgetPass">
			确认修改
		</view>
		<view class="tips">
			<text>想起密码？</text>
			<text class="register" @tap="toLogin()">去登陆</text>
		</view>
	</view>
</template>

<script>
	import {
		forgetPass,
		smsAPI
	} from "@/api/api.js"
	export default {
		data() {
			return {
				text: "获取验证码",
				time: 60000,
				timer: null,
				phone: "",
				code: "",
				password: "",
			}
		},
		methods: {
			toLogin() {
				uni.redirectTo({
					url: "/pages/login/login"
				})
			},
			forgetPass() {
				if (this.phone == "") {
					uni.showToast({
						title: "手机号不能为空",
						icon: "none"
					})
					return
				}
				if (this.code == "") {
					uni.showToast({
						title: "验证码不能为空",
						icon: "none"
					})
					return
				}
				if (this.password == "") {
					uni.showToast({
						title: "新密码不能为空",
						icon: "none"
					})
					return
				}
				let data = {
					phone: this.phone,
					code: this.code,
					new_password: this.password,
				}
				forgetPass(data).then(res => {
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					})
					setTimeout(() => {
						this.toLogin()
					}, 1000)
				})
			},
			getCode() {
				if (this.phone == "") {
					uni.showToast({
						title: "手机号不能为空",
						icon: "none"
					})
					return
				}
				if (this.time == 60000) {
					smsAPI({
						phone: this.phone,
						event: 'forget'
					}).then(res => {
						this.timer = setInterval(() => {
							this.time = this.time - 30
							this.text = Math.floor((this.time / 1000)) + "s后重试"
							if (this.time < 30) {
								clearInterval(this.timer)
								this.time = 60000
								this.text = "重新发送"
							}
						}, 30)
						this.code = res.data.data.code
						uni.showToast({
							title: res.data.msg,
							icon: "none"
						})
					})

				}
			}
		}
	}
</script>

<style lang='scss' scoped>
	.container {
		width: 100%;
		min-height: 100vh;

		.content {
			width: 80%;
			margin: 180rpx auto 0;
			/* background: linear-gradient(180deg, #FFFFFF 0%, #FFF7E7 100%); */
			background-color: #fff;
			padding: 40rpx 40rpx 20rpx;
			border-radius: 30rpx;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

			.item {
				margin-bottom: 40rpx;

				.title {
					font-size: 28rpx;
					color: #8a8a8a;
				}

				uni-input {
					border-bottom: 2rpx solid gainsboro;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 24rpx;
				}

				.input_box {
					display: flex;
					align-items: center;
					border-bottom: 2rpx solid gainsboro;

					uni-text {
						font-size: 28rpx;
						color: #5a5a5a;
						padding-left: 20rpx;
						border-left: 2rpx solid gainsboro;
					}

					uni-input {
						border-bottom: 0;
						flex: 1;
					}
				}
			}
		}

		.btn {
			/* background: linear-gradient(180deg, #FFFFFF 0%, #FFF7E7 100%); */
			background-color: #fff;
			width: 200rpx;
			height: 80rpx;
			margin: 40rpx auto;
			border-radius: 20rpx;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			display: flex;
			align-items: center;
			justify-content: center;
			color: #5a5a5a;
		}

		.tips {
			font-size: 24rpx;
			text-align: center;
			color: #8a8a8a;

			.register {
				color: #5a5a5a;
			}
		}
	}

	.header {
		/* background: #fff no-repeat; */
		background-size: cover;
		height: 200rpx;

		.door {
			/* background: #fff no-repeat; */
			background-size: 100% 100%;
			width: 108rpx;
			height: 36rpx;
			position: absolute;
			top: 116rpx;
			left: 40rpx;
		}
	}
</style>